<script setup lang="ts">

import { ref, computed } from 'vue'
import type { Ref, ComputedRef } from 'vue';
// 旧密码
const psd: Ref<string> = ref('')
// 新密码
const newpsd: Ref<string> = ref('')
// 确认新密码
const newpsdagain: Ref<string> = ref('')

// 验证密码
const flag = computed(() => {
  if (psd.value.length != 0 && newpsd.value.length != 0 && newpsd.value == newpsdagain.value) {
    return false
  } else {
    return true
  }
})

</script>
<template>
  <div class="password">
    <van-nav-bar style="background-color: white" title="修改密码">
      <template #left>
        <p @click="$router.back()"><van-icon color="gray" name="arrow-left" /><span class="back">返回</span></p>
      </template>
    </van-nav-bar>

    <div class="vanCellGroup">
      <van-cell-group inset>
        <van-field v-model="psd" placeholder="请输入旧密码" type="password" left-icon="goods-collect-o" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field v-model="newpsd" placeholder="请输入新密码" type="password" left-icon="goods-collect-o" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field v-model="newpsdagain" placeholder="请再次输入新密码" type="password" left-icon="goods-collect-o" />
      </van-cell-group>

      <van-button :disabled="flag" type="primary" size="normal" @click="$router.push('/login')">确认修改</van-button>
    </div>


  </div>
</template>
<style lang="scss" scoped>
.van-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.password {
  height: 100%;
  background-color: #f5f5f5;
}

.vanCellGroup {
  padding-top: 100px;
}

.van-cell-group {
  /* margin-top: 20px; */
  border-bottom: 1px solid gray;
}

.van-button {
  width: 90%;
  margin-left: 5%;
  margin-top: 30px;
}

.back {
  color: blue;
}
</style>
